import type { Directive } from 'vue'

export const lazyLoad: Directive = {
  mounted(el: HTMLVideoElement) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const video = entry.target as HTMLVideoElement;
          if (video.dataset.src) {
            video.src = video.dataset.src;
            video.load();
          }
          observer.unobserve(video);
        }
      });
    }, {
      rootMargin: '50px 0px',
      threshold: 0.1
    });

    observer.observe(el);
  }
} 